<template>
    <div>
        <h1>网点管理</h1>
        <el-select style="margin-bottom: 30px;" v-model="city">
            <el-option label="上海" value="上海">上海</el-option>
            <el-option label="北京" value="北京">北京</el-option>
            <el-option label="哈尔滨" value="哈尔滨">哈尔滨</el-option>
        </el-select>

        <div class="wdgl_wrap">
            <div class="left">
                <div class="grid" :class="{ active: nowActive == index }" v-for="(item, index) in arr" :key="item.name"
                    @click="dadian(item.lng, item.lat); nowActive = index">
                    <p>{{ item.name }}</p>
                    <p>{{ item.address }}</p>
                </div>
            </div>
            <div class="right">
                <div id="container"></div>
            </div>
        </div>
    </div>
</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader';
import { fetchWD } from '@/api/wdgl';

export default {
    data() {
        return {
            map: null,
            city: '上海',
            arr: [],
            nowActive: 0,
            marker: null
        }
    },
    created() {
        this.loadData();
    },
    mounted() {
        AMapLoader.load({
            "key": "51e5501a4abd79ba2d7ddd0103e581d1",              // 申请好的Web端开发者Key，首次调用 load 时必填
            "version": "2.0",   // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
            "plugins": [],           // 需要使用的的插件列表，如比例尺'AMap.Scale'等
            "AMapUI": {             // 是否加载 AMapUI，缺省不加载
                "version": '1.1',   // AMapUI 版本
                "plugins": ['overlay/SimpleMarker'],       // 需要加载的 AMapUI ui插件
            },
            "Loca": {                // 是否加载 Loca， 缺省不加载
                "version": '2.0'  // Loca 版本
            },
        }).then((AMap) => {
            var map = new AMap.Map('container');
            // map.addControl(new AMap.Scale());

            console.log(map);

            this.map = map;
        }).catch((e) => {
            console.error(e);  //加载错误提示
        });
    },
    methods: {
        async loadData() {
            const data = await fetchWD(this.city);

            this.arr = data;
        },
        dadian(lng, lat) {
            if (this.marker != null) {
                this.map.remove(this.marker)
            }
            // 创建一个 Marker 实例：
            this.marker = new AMap.Marker({
                position: new AMap.LngLat(lng, lat),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
                title: '北京'
            });

            this.marker.on('click', () => {
                // 信息窗体的内容
                var content = [
                    "<div><div><b>" + this.arr[this.nowActive].name + "</b>",
                    `电话 : ${this.arr[this.nowActive].tel} `,
                    `地址 : ${this.arr[this.nowActive].address} `
                ];

                // 创建 infoWindow 实例	
                var infoWindow = new AMap.InfoWindow({
                    content: content.join("<br>"),  //传入 dom 对象，或者 html 字符串,
                    offset: new AMap.Pixel(16, -50)
                });

                // 打开信息窗体
                infoWindow.open(this.map, [lng, lat]);
            })





            // 将创建的点标记添加到已有的地图实例：
            this.map.add(this.marker);
            // 设置级别
            this.map.setZoom(15);
            // 中心对准这个点
            this.map.setCenter([lng, lat]);

        }
    },
    watch: {
        map() {
            if (this.arr.length != 0) {
                this.dadian(this.arr[0].lng, this.arr[0].lat)
            }
        },
        arr() {
            if (this.map != null) {
                this.dadian(this.arr[0].lng, this.arr[0].lat)
            }
        },
        city() {
            this.loadData();
        }
    }
}
</script>

<style lang="less" scoped>
.wdgl_wrap {
    display: flex;

    .left {
        width: 300px;
        height: 480px;
        overflow-y: scroll;

        .grid {
            border-bottom: 1px solid bisque;
            cursor: pointer;

            p {
                margin: 0;
                line-height: 34px;
            }

            &:hover {
                background: rgb(247, 196, 133);
            }

            &.active {
                background: rgb(179, 219, 35);
            }
        }
    }

    .right {
        width: 800px;
        margin-left: 10px;

        #container {
            width: 800px;
            height: 480px;
        }
    }
}
</style>